window.addEventListener('load',function(){
    var zuo=document.querySelector('.zuo');
    var you=document.querySelector('.you');
    var a=document.querySelector('.a');
    var ul=a.querySelector('ul');
    var ol=a.querySelector('.circle');
    var aWidth = a.offsetWidth;
    //鼠标经过盒子显示左右按钮
    a.addEventListener('mouseenter',function(){
        zuo.style.display='block';
        you.style.display='block';
        clearInterval(timer);
        timer=null;//清除定时器变量
    })
    
    //鼠标经过盒子隐藏左右按钮
    a.addEventListener('mouseleave',function(){
        zuo.style.display='none';
        you.style.display='none';
        timer=setInterval(function(){
            you.click();//手动调用点击事件
        },2000)
    })

    //动态创建底部的小圆
    for(var i=0;i<ul.children.length;i++){
        var li=document.createElement('li');//创建li
        //记录当前小圆圈的索引号
        li.setAttribute('index',i);
        ol.appendChild(li);//将li插入到ol中
        //小圆圈进行排他思想，生成小圆圈的同时直接绑定点击事件
        li.addEventListener('click',function(){
            //排他思想
            for(var j=0;j<ol.children.length;j++){
                ol.children[j].className='';
            }
            this.className='current';
            //点击小圆圈移动图片，移动的是ul
            //ul的移动距离是小圆圈的索引号*图片的宽度，注意图片默认往左走，是负值，
            //点击了某个li就拿都当前li的索引号
            var index = this.getAttribute('index');
            num=circle=index;//将li的索引号赋值给num&circle
            animate(ul, -index*aWidth); 
        })
    }
    //将ol中的第一个li设置类名为 current
    ol.children[0].className='current';
    //无缝滚动↓
    var first=ul.children[0].cloneNode(true);//克隆第一张图片
    ul.appendChild(first);//将克隆的图片放置到最后
    //点击左右按钮，图片滚动
    var num=0;
    var circle=0;//控制小圆圈播放

    //右侧按钮 ↓
    var flag=true;//节流阀，防止点击时速度过快
    you.addEventListener('click',function(){
        if(flag){
            flag=false;//关闭节流阀
        //走到最后ul快速复原
        if(num==ul.children.length-1){
            ul.style.left=0;
            num=0;
        }
        num++;
        //调用animate.js 
        animate(ul,-num*aWidth,function(){
            flag=true;//打开节流阀
        });
        circle++;
        if(circle==ul.children.length-1){//如果circle=ul.children.length-1，说明走到最后克隆的图片
            circle=0;
        }
        circleChange();//调用排他
        }
    })

    //左侧按钮 ↓
    zuo.addEventListener('click',function(){
        if(flag){
            flag=false;
            //走到最后ul快速复原
        if(num==0){
            num=ul.children.length-1;
            ul.style.left=-num*aWidth+'px';
        }
        num--;//反向
        //调用animate.js 
        animate(ul,-num*aWidth,function(){
            flag=true;//打开节流阀
        });
        circle--;
        if(circle<0){//当circle<0,说明处于第一张图片
            circle=ol.children.length-1;
        }
        circleChange();//调用排他
        }
    })
    //排他思想，去除其他小圆圈的类名，留下当前小圆圈的类名
    function circleChange(){
        for(var k=0;k<ol.children.length;k++){
            ol.children[k].className='';
        }
        ol.children[circle].className='current';
    }
    //自动播放 ↓
    var timer=setInterval(function(){
        you.click();//手动调用点击事件
    },2000)
})